<template>
  <div class="action-table">
    <div v-if="title" class="action-header">
      <div class="header-title">{{ title }}</div>
      <el-button
        v-if="headBtnTitle"
        type="primary"
        @click="headBtnClick"
        size="small"
      >
        {{ headBtnTitle }}
      </el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="d.tables"
      :header-cell-style="headerClass"
      :cell-style="{ 'text-align': 'center' }"
      @select-all="selChange"
      @select="selChange"
    >
      <el-table-column>
        <template #header>
          <div class="header">
            <span>{{ tableHeader }}</span>
            <el-button
              v-if="!isDisabled && isShowAdd"
              @click="addMedical"
              size="small"
            >
              添加药物
            </el-button>
          </div>
        </template>
        <el-table-column
          :type="selectionType"
          width="55"
          class-name="selectDisable"
          :selectable="disabledSel"
        />
        <el-table-column property="medicineName" label="药品名称(规格)">
          <template #default="scope">
            {{
              scope.row.medicineName +
              '(通用名:' +
              scope.row.commonName +
              ')' +
              '规格:' +
              scope.row.spec
            }}
          </template>
        </el-table-column>
        <el-table-column property="commonName" label="通用名称">
          <template #default="scope">{{ scope.row.commonName }}</template>
        </el-table-column>
        <el-table-column property="singleDosage" label="单次用量">
          <template #default="scope">每次{{ scope.row.singleDosage }}</template>
        </el-table-column>
        <el-table-column property="frequency" label="频次">
          <template #default="scope">
            {{ findTermChs(scope.row.frequency) }}
          </template>
        </el-table-column>
        <el-table-column property="usage" label="用法">
          <template #default="scope">
            {{ scope.row.usage }}
          </template>
        </el-table-column>
        <el-table-column property="remark" label="备注">
          <template #default="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column property="address" label="操作">
          <template #default="scope">
            <div v-if="!isDisabled">
              <el-button
                size="small"
                type="primary"
                @click="edit(scope.row, scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                v-if="isShowAdd"
                size="small"
                type="danger"
                @click="del(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </div>
            <div v-else>无操作</div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { computed, nextTick, reactive, ref, watch } from 'vue'
  import emrHook from '@/hooks/emr.vue'
  export default {
    name: 'actionTable',
    props: {
      title: String,
      headBtnTitle: String,
      isDisabled: Boolean,
      tableHeader: String,
      modelValue: Array,
      type: String,
      tableColor: {
        type: String,
        default() {
          return null
        },
      },
    },
    emits: ['add', 'update:modelValue', 'headBtn'],
    setup(props, context) {
      const d = reactive({ isShow: false, tables: [] })
      const headerClass = function (row) {
        if (row.rowIndex === 0 && props.tableColor)
          return {
            background: props.tableColor,
            color: 'white',
            'text-align': 'center',
          }
        if (row.rowIndex === 0)
          return {
            background: '#F5F5F5',
            color: 'inherit',
            'text-align': 'center',
          }
        return {
          background: '#F5F5F5',
          color: 'inherit',
          'text-align': 'center',
        }
      }

      const tableRef = ref(null)

      // 初始化数据
      watch(
        () => props.modelValue,
        async (vals) => {
          d.tables = vals
          await nextTick()
          d.tables.map((item, index) => {
            const b = item.backSave === true ? true : false
            tableRef.value.toggleRowSelection(item, b)
          })
          context.emit('update:modelValue', d.tables)
        },
        { immediate: true, deep: true }
      )
      const selectionType = computed(() => {
        // return disabledSel.value ? 'selection' : 'index'
        if (
          props.tableHeader ===
            '如果运动引起哮喘，可在运动前30分钟选择以下药物(如果运动引起哮喘，请及时就医)' &&
          !props.isDisabled
        ) {
          return 'selection'
        }
        return 'index'
      })
      // 决定能不能多选
      const disabledSel = computed(() => {
        return (row, rowIndex) => {
          const item = props.modelValue[rowIndex]
          if (
            props.tableHeader ===
              '如果运动引起哮喘，可在运动前30分钟选择以下药物(如果运动引起哮喘，请及时就医)' &&
            !props.isDisabled &&
            item.backSet
          ) {
            return true
          }
          return false
        }
      })

      const isShowAdd = computed(() => {
        if (
          props.tableHeader ===
          '如果运动引起哮喘，可在运动前30分钟选择以下药物(如果运动引起哮喘，请及时就医)'
        ) {
          return false
        }
        return true
      })

      const isCommonNameShow = computed(() => {
        if (Array.isArray(props.modelValue) && props.modelValue.length > 0) {
          const item = props.modelValue[0]
          if (item.commonName) return true
          return false
        } else {
          return false
        }
      })
      const selChange = (selection) => {
        // 其他区不需要做这个
        if (isShowAdd.value) return
        d.tables.forEach((element) => {
          const item = selection.find((item) => {
            return item.drugId === element.drugId
          })

          element.backSave = false
          if (item) item.backSave = true
        })
        context.emit('update:modelValue', d.tables)
      }
      const addMedical = function () {
        context.emit('add', props.type)
      }

      // 是否选中该行
      const toggleRowSel = (selection, row) => {}
      const edit = function (row, index) {
        const item = props.modelValue[index]
        context.emit('edit', { type: props.type, data: row, index })
      }

      const del = function (row, index) {
        const values = props.modelValue.filter((itme, i) => index !== i)
        context.emit('update:modelValue', values)
      }

      const headBtnClick = function () {
        context.emit('headBtnClick')
      }
      const { findTermChs } = emrHook()
      return {
        findTermChs,
        headerClass,
        d,
        addMedical,
        edit,
        del,
        headBtnClick,
        disabledSel,
        selChange,
        isShowAdd,
        toggleRowSel,
        tableRef,
        isCommonNameShow,
        selectionType,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .action-table {
    margin: 20px 0;

    .action-header {
      display: flex;

      justify-content: space-between;
      align-items: center;

      .header-title {
        font-size: 14px;
        margin: 10px;
      }

      .left-hubs {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
